const e = `<!--
 * @Author: Quarter
 * @Date: 2024-08-01 11:15:43
 * @LastEditors: Quarter
 * @LastEditTime: 2024-10-17 17:22:17
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/steps/default-steps.vue
 * @Description: 默认的步骤条组件
-->
<template>
  <s-flex direction="column" gap="1em">
    <s-form label-width="6em" colon="：">
      <s-form-item label="布局方式">
        <s-radio-group v-model="options.layout" :options="layoutList"></s-radio-group>
      </s-form-item>
      <s-form-item label="连接样式">
        <s-radio-group v-model="options.separator" :options="separatorList"></s-radio-group>
      </s-form-item>
      <s-form-item label="主题模式">
        <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>
      </s-form-item>
      <s-form-item label="是否只读">
        <s-radio-group v-model="options.readonly" :options="isOrNotList"></s-radio-group>
      </s-form-item>
    </s-form>
    <s-steps
      default-step="2"
      :layout="options.layout"
      :separator="options.separator"
      :theme="options.theme"
      :readonly="options.readonly"
    >
      <s-step-item index="1" value="1" title="步骤一" description="已完成的步骤">步骤一的内容</s-step-item>
      <s-step-item index="2" value="2" title="步骤二" description="正在进行中的步骤">步骤二的内容</s-step-item>
      <s-step-item index="3" value="3" title="步骤三" description="还未开始的步骤">步骤三的内容</s-step-item>
    </s-steps>
  </s-flex>
</template>

<script lang="ts">
import {
  STEP_LAYOUT_OPTIONS,
  STEP_SEPARATOR_DEFAULT,
  STEP_THEME_DEFAULT,
  STEP_THEME_OPTIONS,
  STEP_THEME_LABEL,
  STEP_SEPARATOR_OPTIONS,
  STEP_SEPARATOR_LABEL,
  STEP_LAYOUT_LABEL,
  STEP_LAYOUT_DEFAULT,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultSteps extends Vue {
  /**
   * @description: 布局方式可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly layoutList = STEP_LAYOUT_OPTIONS.map((layout) => ({
    value: layout,
    label: STEP_LAYOUT_LABEL.get(layout),
  }));

  /**
   * @description: 连接样式可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly separatorList = STEP_SEPARATOR_OPTIONS.map((separator) => ({
    value: separator,
    label: STEP_SEPARATOR_LABEL.get(separator),
  }));

  /**
   * @description: 主题模式可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = STEP_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: STEP_THEME_LABEL.get(theme),
  }));

/**
 * @description: 是否列表
 * @private
 * @readonly
 * @type {Array<Object>}
 */
readonly isOrNotList = [
  { value: true, label: "是" },
  { value: false, label: "否" },
];

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    layout: STEP_LAYOUT_DEFAULT, // 布局方式
    separator: STEP_SEPARATOR_DEFAULT, // 连接样式
    theme: STEP_THEME_DEFAULT, // 主题模式
    readonly: false, // 是否只读
  };
}
<\/script>
`; export { e as default };
